import QtQuick 2.0
import Sailfish.Silica 1.0
import "./BasicChat.js" as Js
import "../components"

Page {
    id: guildChannelChat

    allowedOrientations: Orientation.All

    property string chat_id

    Component.onCompleted: Js.handleReady(chat_id)
    Component.onDestruction: Js.handleDestroy()
    
    property bool isDebug: false

    Rectangle {
        anchors.fill: parent
        color: "#313338"

        Column {
            anchors.fill: parent

            Rectangle { 
                id: headerElement
                color: "#2a2e31"
                radius: 10.0
                width: parent.width
                height: 120

                Text {
                    anchors.centerIn: parent
                    font.pointSize: 24
                    text: qsTr("Чат") 
                    color: "#999999"
                } 
            }
            Rectangle {
                color: "#1c2023"
                width: parent.width
                height: 1
            }
            Rectangle { 
                color: "#00000000" 
                radius: 10.0
                width: parent.width
                // height: parent.height - Theme.dp(200)
                height: {
                    return parent.height - 
                        headerElement.height - 
                        Math.min(Math.max(messageField2.implicitHeight, 100), 400) - 
                        10
                }

                SilicaListView {
                    id: listBasicChatView

                    verticalLayoutDirection: ListView.BottomToTop

                    clip: true
                    quickScroll: false

                    width: parent.width
                    height: parent.height - Theme.dp(30)

                    // cacheBuffer: 5000

                    y: 10

                    // width: parent.width
                    // height: parent.height - Theme.dp(80) - Theme.paddingMedium * 2
                    model: ListModel {
                        id: listBasicChatModel
                    }
                    delegate: ListItem {
                        menu: contextMenu
                        width: parent.width - Theme.dp(10)
                        contentHeight: outerBody.height

                        Rectangle { 
                            id: outerBody
                            color: isDebug ? "#AA2E88" : "#00000000"
                            radius: 10.0
                            
                            width: parent.width
                            height: textFieldContainer.height + ( isShort ? Theme.dp(10) : Theme.dp(55) )

                            CircularImage {
                                id: avatar
                                width: Theme.dp(50)
                                visible: !isShort
                                anchors {
                                    left: parent.left
                                    leftMargin: Theme.paddingMedium
                                    top: parent.top
                                    topMargin: Theme.paddingMedium + Theme.dp(10)
                                }
                                source: userAvatar
                            }

                            Label {
                                id: nickNameField
                                font.pixelSize: Theme.fontSizeTiny
                                font.bold: true
                                text: nickName
                                color: colorName
                                visible: !isShort
                                anchors {
                                    left: avatar.right
                                    leftMargin: Theme.paddingMedium
                                    top: parent.top
                                    topMargin: Theme.paddingMedium + Theme.dp(10)
                                }
                            }

                            Label {
                                id: timeField
                                font.pixelSize: Theme.fontSizeTiny
                                font.bold: false 
                                text: Js.getDateText(timeText)
                                visible: !isShort
                                color: "#999999"
                                anchors {
                                    left: nickNameField.right
                                    leftMargin: Theme.paddingMedium
                                    top: nickNameField.top
                                }
                            }

                            Rectangle { 
                                id: textFieldContainer
                                color: isDebug ? "#FFC3A0" : "#00000000"
                                radius: 10.0
                                width: parent.width - Theme.dp(43) - Theme.paddingMedium * 4
                                height: {

                                    if (isDebug) {
                                        console.log("gridView " + 
                                            textLength + ", " + 
                                            imageAttachmentAmount + ", " + 
                                            binaryAttachmentAmount + ", " +
                                            gridView.implicitHeight + ", " + 
                                            gridView.contentHeight + ", " + 
                                            gridView.height)
                                        console.log("textField " + 
                                            textLength + ", " + 
                                            imageAttachmentAmount + ", " + 
                                            binaryAttachmentAmount + ", " + 
                                            textField.implicitHeight + ", " + 
                                            textField.contentHeight + ", " + 
                                            textField.height)
                                        console.log("_listView " + 
                                            textLength + ", " + 
                                            imageAttachmentAmount + ", " + 
                                            binaryAttachmentAmount + ", " + 
                                            _listView.implicitHeight + ", " + 
                                            _listView.contentHeight + ", " + 
                                            _listView.height)
                                    }

                                    return (textLength == 0 ? 0 : textField.contentHeight) + (Math.ceil((imageAttachmentAmount/3)) * 150) + Math.max(_listView.contentHeight, 0)
                                }

                                anchors {
                                    left: avatar.right
                                    leftMargin: Theme.paddingMedium

                                    top: parent.top
                                    topMargin: isShort ? Theme.dp(5) : Theme.dp(50)
                                }

                                Label {
                                    id: textField
                                    visible: textLength > 0
                                    width: parent.width
                                    wrapMode: Label.WrapAnywhere
                                    font.pixelSize: Theme.fontSizeTiny
                                    font.bold : false
                                    text: chatMessage
                                    height: 20
                                    // textFormat: Text.MarkdownText
                                    // textFormat: Text.RichText
                                    color: "#FFFFFFFF"
                                    linkColor: "#add8e6"
                                    onLinkActivated: {
                                        // console.log("Open link=" + link)
                                        Qt.openUrlExternally(link)
                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text
                                        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
                                    }
                                }

                                GridView { 
                                    id: gridView
                                    visible: imageAttachmentAmount > 0
                                    model: imageAttachments

                                    width: parent.width
                                    height: {
                                        return (Math.ceil((imageAttachmentAmount/3)) * 150)
                                    }

                                    anchors {
                                        leftMargin: 10
                                        rightMargin: 10
                                        top: parent.top
                                        topMargin: textLength == 0 ? 0 : textField.contentHeight
                                    }

                                    cellWidth : 150
                                    cellHeight: 150 
                                    interactive: false
                                    delegate: Rectangle { 
                                        width: gridView.cellWidth - 10
                                        height: gridView.cellHeight - 10
                                        color: "#1c2023"
                            
                                        Image { 
                                            id: thumbnail
                                            anchors {
                                                leftMargin: 2
                                                rightMargin: 2
                                                topMargin: 2
                                                bottomMargin: 2

                                                top: parent.top
                                                bottom: parent.bottom
                                                left: parent.left
                                                right: parent.right
                                            }

                                            fillMode: Image.PreserveAspectCrop
                                            // cache: false 
                                            clip: true
                                            source: url_small
                                            // sourceSize.width: small_width
                                            // sourceSize.height: small_height
                                        } 
                                    }
                                }
                                
                                ListView {
                                    id: _listView
                                    width: parent.width
                                    visible: binaryAttachmentAmount > 0
                                    model: binaryAttachments
                                    anchors {
                                        leftMargin: 10
                                        rightMargin: 10
                                        top: parent.top
                                        topMargin: (textLength == 0 ? 0 : textField.contentHeight) + (Math.ceil((imageAttachmentAmount/3)) * 150)
                                    }

                                    delegate: Rectangle {
                                        id: _rectangleDelegate
                                        width: ListView.view.width - Theme.paddingMedium * 2
                                        height: Theme.dp(60) + Theme.paddingMedium * 2
                                        radius: 10.0
                                        color: "#1c2023"

                                        // contentHeight: Theme.dp(20) + Theme.paddingMedium * 2

                                        Image {
                                            id: iconAttach
                                            width: Theme.dp(60)
                                            height: Theme.dp(60)
                                            anchors {
                                                left: parent.left
                                                leftMargin: Theme.paddingMedium
                                                top: parent.top
                                                topMargin: Theme.paddingMedium
                                            }
                                            source: {
                                                // console.log("TTT="+"image://theme/icon-l-document?#FFFFFF")
                                                return "image://theme/icon-l-document?#FFFFFF"
                                            }
                                        }

                                        Label {
                                            id: filenameAttach
                                            font.pixelSize: Theme.fontSizeTiny
                                            width: _rectangleDelegate.width - Theme.dp(200)
                                            truncationMode: TruncationMode.Fade
                                            font.bold: false
                                            text: filename
                                            color: "#999999"
                                            anchors {
                                                left: iconAttach.right
                                                leftMargin: Theme.paddingMedium
                                                top: parent.top
                                                topMargin: Theme.paddingMedium + Theme.dp(2)
                                            }
                                        }

                                        Label {
                                            id: filesizeAttach
                                            font.pixelSize: Theme.fontSizeTiny
                                            font.bold: false 
                                            text: filesize
                                            color: "#999999"
                                            anchors {
                                                left: iconAttach.right
                                                leftMargin: Theme.paddingMedium
                                                top: filenameAttach.bottom
                                                topMargin: Theme.dp(2)
                                            }
                                        }

                                        Image {
                                            id: downloadButton
                                            width: Theme.dp(40)
                                            height: Theme.dp(40)
                                            anchors {
                                                right: parent.right
                                                rightMargin: Theme.paddingMedium
                                                top: parent.top
                                                topMargin: Theme.paddingMedium*2
                                            }
                                            source: {
                                                // console.log("TTT="+"image://theme/icon-l-document?#FFFFFF")
                                                return "image://theme/icon-m-cloud-download?#FFFFFF"
                                            }
                                        }

                                        MouseArea {
                                            id: mouseArea
                                            anchors.fill: downloadButton
                                            // preventStealing: true
                                            onClicked: {
                                                console.log("Download url")
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        Component {
                            id: contextMenu
                            ContextMenu {
                                MenuItem {
                                    text: "Copy message"
                                }
                            }
                        }
                    }

                    onCountChanged: Js.onCountChanged()
                
                    onContentYChanged: Js.onContentYChanged()

                    onAtYEndChanged: Js.onAtYEndChanged()

                    VerticalScrollDecorator { 
                        flickable: listGuildChatView 
                    }
                }
            }
                // PullDownMenu {
                //     MenuItem {
                //         id: updateChat
                //         text: "Обновить"
                //     }
                // }
            Rectangle {
                color: "#1c2023"
                width: parent.width
                height: 1
            }
            
            Rectangle { 
                color: isDebug ? "#FFC3A0" : "#00000000"
                radius: 10.0
                width: parent.width
                height: {
                    console.log("messageField2 " + 
                        messageField2.implicitHeight + ", " + 
                        messageField2.contentHeight + ", " + 
                        messageField2.heigh)

                    return Math.min(Math.max(messageField2.implicitHeight, 100), 400)
                }

                Rectangle {
                    color: "#1c2023"
                    radius: 50.0
                    // anchors.fill: parent
                    // width: parent.width
                    // height: parent.height

                    anchors {
                        left: messageField2.left
                        leftMargin: Theme.dp(10)

                        top: messageField2.top
                        topMargin: -Theme.dp(5)

                        right: messageField2.right
                        rightMargin: Theme.dp(10)

                        bottom: messageField2.bottom
                        bottomMargin: Theme.dp(35)
                    }
                }
                
                TextArea {
                    id: messageField2
                    placeholderText: "Текст сообщения"
                    anchors {
                        top: parent.top
                        topMargin: Theme.dp(20)
                        bottom: parent.bottom
                        bottomMargin: -Theme.dp(20)
                    }

                    color: "#FFFFFFFF"
                    placeholderColor: "#999999"
                    wrapMode: TextEdit.WrapAnywhere
                    backgroundStyle: TextEditor.NoBackground

                    EnterKey.onClicked: Js.handleMessageInput()
                }
            }
        }
    }
}